<template>
  <section class="croppa-article-cover" @click="handleModify">
    <div v-show="showExamplelImg" class="examplel-img">
      <img :src="exampleImage" alt="">
    </div>
    <croppa
      id="croppa"
      v-model="croppa"
      v-loading="loading"
      element-loading-text="拼命加载中"
      placeholder="点击选择一张图片"
      :placeholder-color="'#8C97CB'"
      :placeholder-font-size="20"
      :width="500"
      :height="250"
      :canvas-color="'#F4F6FA'"
      :file-size-limit="8388608"
      :show-remove-button="false"
      :disable-drag-and-drop="true"
      :disable-drag-to-move="true"
      :disable-scroll-to-zoom="true"
      :disable-rotation="true"
      prevent-white-space
      @file-size-exceed="fileSizeExceed"
      @loading-end="loadingEnd"
    />
  </section>
</template>

<script>
import Vue from 'vue'
import Croppa from 'vue-croppa'
Vue.use(Croppa)

export default {
  name: 'CroppaArtcleCover',
  props: {
    initialImage: {
      type: String,
      default: () => ''
    },
    articleId: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      loading: false,
      croppa: {},
      showExamplelImg: false,
      exampleImage: this.initialImage
    }
  },
  created() {
    if (this.initialImage) {
      this.showExamplelImg = true
    }
  },
  methods: {
    handleModify() {
      this.croppa.chooseFile()
    },
    fileSizeExceed() {
      this.$alert('文件大于8M，请重新选择', '提示', {
        confirmButtonText: '确定',
        type: 'warning'
      })
    },
    loadingEnd() {
      this.showExamplelImg = !this.showExamplelImg
      this.uploadCroppedImage()
    },
    async updateArticleImg(articleImg) {
      // 更新文章图片
      const params = {
        id: this.articleId,
        articleImg
      }
      const data = await this.$request({
        context: this,
        method: 'post',
        url: 'article/updateArticleInformation',
        params
      })
      if (!data) {
        this.showExamplelImg = true
        this.loading = false
        this.croppa.remove()
        return
      }
      this.exampleImage = articleImg
      this.showExamplelImg = true
      this.loading = false
      this.croppa.remove()
    },
    async uploadCroppedImage() {
      this.loading = true
      const params = {
        'base64Data': this.croppa.generateDataUrl('image/jpeg')
      }
      const data = await this.$request({
        context: this,
        method: 'post',
        url: 'upload/advertise',
        params
      })
      if (!data) {
        this.showExamplelImg = false
        this.loading = false
        this.croppa.remove()
        return
      }
      // 如果上传图片成功，更新文章图片
      this.updateArticleImg(data)
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/assets/css/public";
  .croppa-article-cover {
    cursor: pointer;
    padding-bottom: 20px;
    .examplel-img {
      width: 500px;
      height: 250px;
      overflow: hidden;
      position: absolute;
      z-index: 1000;
      background: $theme-color-background;
      img {
        @include inner-img;
      }
    }

    #croppa {
      margin: 0 auto;
      overflow: hidden;
    }

    .btn-panel {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
